<template>
  <div class="goods contain">
    <el-table :data="data" style="width: 100%" @cell-click="goDetail" stripe>
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <img :src="baseUrl + scope.row.coverImg" class="image" width="180" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.goodsName }}</b>
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <i style="font-size: 17px; color: red">￥{{ scope.row.price }}</i>
        </template>
      </el-table-column>
      <el-table-column label="商品分类" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.firstCategory }}</b>
        </template>
      </el-table-column>
      <el-table-column label="买家" width="180">
        <template slot-scope="scope">
          <div style="text-align: center">
            <el-avatar
              size="large"
              :src="baseUrl + scope.row.avatar"
            ></el-avatar
            ><br />
            <b>{{ scope.row.userName }}</b>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            ref="cart"
            size="medium"
            @click.stop="handleCart($event, scope.row._id, scope.row)"
            >{{
              $store.state.user._id
                ? isCart(scope)
                  ? "收藏"
                  : "取消收藏"
                : "收藏"
            }}</el-button
          >
          <el-button
            size="medium"
            type="danger"
            @click.stop="goBuy(scope.row._id, scope.row)"
            >购买</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="支  付"
      :visible.sync="centerDialogVisible"
      width="25%"
      center
      top="10%"
      v-if="centerDialogVisible"
    >
      <p>
        订单备注请输入：<b ref="temp" style="color: red">{{ Date.now() }}</b>
      </p>
      <img :src="imgUrl" alt="" style="width: 100%" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="paid">已经支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["tableData"],
  data() {
    return {
      imgUrl: process.env.VUE_APP_BASE_API + "public/img/zhipay.jpg",
      baseUrl: process.env.VUE_APP_BASE_API,
      data: [],
      pages: 1,
      cart: this.$store.state.user.cart,
      centerDialogVisible: false,
      loading: true,
      id: "",
    };
  },
  computed: {
    isCart() {
      return (scope) => {
        // console.log(scope.row._id,this.$store.state.user.cart);
        // console.log(this.$store.state.user.cart?.indexOf(scope.row._id)==-1);
        return this.$store.state.user.cart?.indexOf(scope.row._id) == -1; //在购物车true
      };
    },
  },

  methods: {
    paid() {
      // console.log(this.$refs.temp.innerText);
      this.axios
        .get("/api/v1/orders/add", {
          params: {
            temp: this.$refs.temp.innerText,
            pid: this.id,
          },
        })
        .then((res) => {
          // console.log(res);
          this.msg(res, this);
          if (res.code == 1) {
            this.centerDialogVisible = false;
          }
        });
      // this.centerDialogVisible = false;
    },
    goBuy(id) {
      if (!this.$store.state.user._id) {
        this.$router.push("/login");
        this.$message({
          message: "请先登录",
          type: "warning",
        });
      }
      this.id = id;
      this.centerDialogVisible = true;
      // this.$router.push({ path: "/buy", query: { id: this.$route.query.id } });
    },
    handleCart(e, ss) {
      console.log(ss);
      if (!this.$store.state.user._id) {
        this.$router.push("/login");
        this.$message({
          message: "请先登录",
          type: "warning",
        });
      }
      this.axios.get("/api/v1/cart/" + ss).then((res) => {
        // console.log(res);
        if (res.type == 0) {
          e.target.innerText = "收藏";
        } else {
          e.target.innerText = "取消收藏";
        }
        if (res.code == 1) {
          if (sessionStorage.getItem("token")) {
            this.msg(res, this);
          }
          this.count = this.count + 1;
        }
      });
    },
    goDetail(row) {
      this.$router.push({ path: "/detail", query: { id: row._id } });
    },
    load() {
      if (!this.loading) {
        this.$message({
          message: "没有更多数据了",
          type: "success",
        });
      }
      if (this.loading) {
        this.axios
          .get("/api/v1/product", { params: { pages: this.pages } })
          .then((res) => {
            console.log(res);
            this.data = [...this.data, ...res.data];
            if (res.data.length == 10) {
              this.pages++;
            } else {
              this.loading = false;
              this.loading = false;
            }
          });
      }
    },
  },
  created() {
    // console.log(this.$props);
    /* if (this.$props.tableData) {
      this.data = this.$props.tableData;
    } */
    this.load();
    this.$nextTick(() => {
      let timer = null;
      window.onscroll = (e) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          // console.log(e);
          var st =
            document.documentElement.scrollTop || document.body.scrollTop;
          var ch = document.documentElement.clientHeight;
          let sh = document.documentElement.scrollHeight;
          console.log(st, ch, sh);
          if (sh - st - ch < 50) {
            this.load();
          }
        }, 300);
      };
    });
  },
};
</script>
<style scoped>
.goods {
  height: 100%;
  /* overflow: auto; */
}
.goods-con {
  display: flex;
  justify-content: space-around;
}
.goods-con li {
  float: left;
  width: 100%;
  height: 180px;
}
.goods-con img {
  /* height: 175px;
  width: 260px; */
  height: 100%;
}
</style>